<template>
  <div class="mine-information-page" >
    <van-cell title="头像" >
      <button class="change-btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
        <div class="avatar-box">
          <img class="avatar" :src="filterForm.profile || 'https://www.thuguardian.com/files/small_program/avatat-default.png'" alt="">
        </div>
      </button>
    </van-cell>
    <van-cell title="姓名" :value="userInfo.name" is-link @click="handleLink('name', userInfo.name)" />
    <van-cell title="性别" :value="userInfo.sex" is-link @click="handleLink('sex', userInfo.sex)" />
    <van-cell title="出生日期" :value="userInfo.birthday" is-link @click="handleLink('birthday', userInfo.birthday)" />
    <van-cell title="手机号" :value="userInfo.mobile" is-link @click="handleLink('mobile', userInfo.mobile)" />
    <van-cell title="居住地" :value="allAddress" is-link @click="handleLink('address', userInfo.address)" />
  </div>
</template>

<script>
  import { getInfo } from '@/api/common/index.js'
  import { updateProfile } from '@/api/mine/index.js'

  export default {
    components: {},
    data() {
      return {
        token: '',
        userInfo: {
          name: '',
          profile: '',
          sex: '',
          birthday: '',
          mobile: '',
          address: ''
        },
        filterForm: {
          profile: ''
        }
      };
    },
    onShow() {
      this.token = wx.getStorageSync('access_token');
      this.getUserInfo()
    },
    computed: {
      allAddress() {
        return `${this.userInfo.province}${this.userInfo.city}${this.userInfo.district} ${this.userInfo.address}`
      },
    },
    onLoad(options) {},
    methods: {
      goLogin() {
        wx.navigateTo({
          url: '/pages/login/main'
        })
      },
      async getUserInfo() {
        const res = await getInfo()
        if (res.code === 200) {
          this.userInfo = res.data
          this.filterForm.profile = this.userInfo.profile
          wx.setStorageSync('userInfo', res.data);
        }
      },
      handleLink(type, value){
        if (type == "address") {
          uni.navigateTo({ url: `/pages/mine-information-edit/main?type=${type}&address=${this.userInfo.address}&province=${this.userInfo.province}&city=${this.userInfo.city}&district=${this.userInfo.district}` });
        } else {
          uni.navigateTo({ url: `/pages/mine-information-edit/main?type=${type}&value=${value}` });
        }
      },
      // 获取头像
      onChooseAvatar (e) {
        const { avatarUrl } = e.target
        this.filterForm.profile = avatarUrl
        let timestamp = new Date().getTime()
        this.uploadFile(avatarUrl, timestamp, this.token)
      },
      uploadFile (tempFilePath, timestamp, token) {
        let that = this
        wx.uploadFile({
          url: 'https://www.thuguardian.com/upload/upload',
          filePath: tempFilePath,
          name: 'file',
          header: {
            "Content-Type": "multipart/form-data"
          },
          formData: {
            token: token,
            key: 'applet/icon/' + timestamp + '.png'
          },
          success (res) {
            that.filterForm.profile = JSON.parse(res.data).data
            that.changeProfile()
          }
        })
      },
      // 保存头像
      changeProfile () {
        if (!this.filterForm.profile) {
          uni.showToast({ title: '请上传头像', icon: 'none' })
          return
        }
        updateProfile({
          profile: this.filterForm.profile
        }).then(res => {
          if (res.code == 200) {
            uni.showToast({ title: '修改成功', icon: 'success' })
          }
        })
      },
    },
  };
</script>

<style lang="less">
  .mine-information-page {
    // padding: 0 30px;
    margin-bottom: env(12px + safe-area-inset-bottom);
    background: #fff;
    .change-btn {
      padding: 0 0;
      color: #555C6A;
      background: #fff;
      border: 0;
      border-radius: 0;
      &:after {
        border: 0;
      }
    }
    .avatar-box {
      margin-left: auto;
      width: 66px;
      height: 66px;
      background: #ccc;
      border-radius: 50%;
      img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
  }

  /deep/.mine-information-page .van-cell {
    padding: 25px 30px;
    font-size: 18px;
    align-items: center;
  }
</style>
